<template>
  <el-drawer title="课程详情" :visible.sync="visible" :with-header="false" size="650px">
    <div class="right-container">
      <div class="container-header">
        <div style="font-size: 14px">统计详情</div>
        <div @click="handleClose">
          <i class="el-icon-close" style="font-size: 18px"></i>
        </div>
      </div>
      <div class="container-content background-color-grey padding-10">
        <div class="bg-white border-radius">
          <div class="flex justify-between align-center margin-bottom-sm padding-lg border-bottom card-heard-title ">
            <div>
              <i class="el-icon-collection-tag" style="font-size: 18px"></i>
              课程信息
            </div>
          </div>
          <div class="padding-lg flex">
            <div class="flex-1">课程名称：{{manageItem.name}}</div>
            <div class="flex-1">学年学期：{{manageItem.studyName}}</div>
          </div>
        </div>

        <div  class="bg-white border-radius margin-top-md">
          <div class="flex justify-between align-center margin-bottom-sm padding-lg border-bottom card-heard-title">
            <div>
              <i class="el-icon-collection-tag" style="font-size: 18px"></i>
              学习进度
            </div>
          </div>
          <div class="padding-lr-lg">
            <el-table ref="studyListRef" :header-cell-style="tableHeaderStyle" :data="studyList"  border
              v-loading="dataListStudyLoading"  style="width: 100%;">
              <!-- //序号 取index+1 -->
              <el-table-column prop="id" label="序号" width="60" align="center">
                <template slot-scope="scope">
                  <span>{{scope.$index + 1}}</span>
                </template>
              </el-table-column>

              <el-table-column prop="userName" header-align="left" align="left" label="用户信息" width="100">
              </el-table-column>

              <el-table-column prop="lastStudyTime" header-align="center" align="center" label="学习时间" width="170">
              </el-table-column>

              <el-table-column prop="progress" header-align="left" align="left" label="学习进度">
                <!-- //如果progressStatus为1，显示已完成，累计学时 ，否则显示未完成 学习进度：0% -->
                <template slot-scope="scope">
                  <span v-if="scope.row.progressStatus === 1">已完成 </span>
                  <span v-else>未完成&nbsp;&nbsp; 学习进度：{{scope.row.progress}}%</span>
                </template>
              </el-table-column>

            </el-table>

            <el-pagination @size-change="sizeChangeHandleStudy" @current-change="currentChangeHandleStudy"
              :current-page="pageIndexStudy" :page-sizes="[10, 20, 50, 100]" :page-size="pageSizeStudy" :total="totalPageStudy"
              layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
          </div>
        </div>
          

        <div class="div-jiange"></div>
        
        <div  class="bg-white border-radius margin-top-md">
          <div class="flex justify-between align-center margin-bottom-sm padding-lg border-bottom card-heard-title">
            <div>
              <i class="el-icon-collection-tag" style="font-size: 18px"></i>
              考试成绩
            </div>
          </div>
          <div class="padding-lr-lg">
            
            <el-table ref="examListRef" :header-cell-style="tableHeaderStyle" :data="examList"  border
              v-loading="dataListExamLoading"  style="width: 100%;">
              <!-- //序	用户信息	考试时间	考试成绩  已通过考试得分：80 / 100-->
              <el-table-column prop="id" label="序号" width="60" align="center">
                <template slot-scope="scope">
                  <span>{{scope.$index + 1}}</span>
                </template>
              </el-table-column>

              <el-table-column prop="userName" header-align="left" align="left" label="用户信息" width="100">
              </el-table-column>

              <el-table-column prop="createTime" header-align="center" align="center" label="考试时间" width="170">
              </el-table-column>

              <el-table-column prop="score" header-align="left" align="left" label="考试成绩">
                <template slot-scope="scope">
                  <span v-if="scope.row.status === 1" >已通过&nbsp;&nbsp;考试得分：{{scope.row.score}} / 100</span>
                  <span v-else>未通过&nbsp;&nbsp;考试得分：{{scope.row.score}} / 100</span>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination @size-change="sizeChangeHandleExam" @current-change="currentChangeHandleExam"
              :current-page="pageIndexExam" :page-sizes="[10, 20, 50, 100]" :page-size="pageSizeExam" :total="totalPageExam"
              layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
          </div>
        </div>

        <div class="div-jiange"></div>

        <div  class="bg-white border-redius margin-top-md">
          <div class="flex justify-between align-center margin-bottom-sm padding-lg border-bottom card-heard-title">
            <div>
              <i class="el-icon-collection-tag" style="font-size: 18px"></i>
              课程评价
            </div>
          </div>
          <div class="padding-lr-lg">
            <el-table ref="commentListRef"  :header-cell-style="tableHeaderStyle" :data="commentList"  border
              v-loading="dataListCommentLoading"  style="width: 100%;">
              <el-table-column prop="id" label="序号" width="60" align="center">
                <template slot-scope="scope">
                  <span>{{scope.$index + 1}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="userName" label="用户信息" width="100" align="left" header-align="left"> </el-table-column>
              <el-table-column prop="createTime" label="评价时间" width="170" align="center" header-align="center"> </el-table-column>
              <el-table-column prop="rate" label="评价得分" align="left" header-align="left"> 
                <template slot-scope="scope">
                  <span>课程内容：{{scope.row.rate}}分</span>
                  <span>讲师表现：{{scope.row.rate1}}分</span>
                  <span>学习体验：{{scope.row.rate2}}分</span>
                </template>
              </el-table-column>
            </el-table>

            <el-pagination @size-change="sizeChangeHandleComment" @current-change="currentChangeHandleComment"
              :current-page="pageIndexComment" :page-sizes="[10, 20, 50, 100]" :page-size="pageSizeComment" :total="totalPageComment"
              layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>

  </el-drawer>
</template>

<script>

export default {
  data() {
    return {
      manageItem: {
        name: '',
        studyName: ''
      },
      dataListStudyLoading: false,
      dataListExamLoading: false,
      dataListCommentLoading: false,
      tableHeaderStyle: { background: '#f5f7fa !important', height: '20px !important', padding: '4px !important' },
      direction: 'rtl',
      visible: false,
      studyList: [],//学习进度列表
      examList: [],//考试成绩列表
      commentList: [],//课程评价列表
      pageIndexStudy: 1,
      pageSizeStudy: 10,
      totalPageStudy: 0,

      pageIndexExam: 1,
      pageSizeExam: 10,
      totalPageExam: 0,

      pageIndexComment: 1,
      pageSizeComment: 10,
      totalPageComment: 0,
    }
  },
  mounted() {
  },
  created() {
  },
  methods: {
    repairTableByRef(refName) {
      this.$nextTick(() => {
        // _self.$refs.你的el-table的ref.doLayout()
         this.$refs[refName].doLayout()
          
      })
    },

    handleClose() {
      this.visible = false; // 关闭外层 Drawer 时不关闭内层 Drawer
    },
    // 学习进度每页数
    sizeChangeHandleStudy(val) {
      this.pageSizeStudy = val
      this.pageIndexStudy = 1
      this.getStudyDataList()
    },
    // 学习进度当前页
    currentChangeHandleStudy(val) {
      this.pageIndexStudy = val
      this.getStudyDataList()
    },
    //获取学习进度数据
    getStudyDataList() {
      this.dataListStudyLoading = true
        let searchParams = {
          'page': this.pageIndexStudy,
          'limit': this.pageSizeStudy,
          "manageId": this.manageItem.id
        }
        this.$http({
          url: this.$http.adornUrl('/class/orderItem/list'),
          method: 'get',
          params: this.$http.adornParams(searchParams)
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.studyList = data.page.list
            this.totalPageStudy = data.page.totalCount
          } else {
            this.studyList = []
            this.totalPageStudy = 0
          }
          this.dataListStudyLoading = false
          this.repairTableByRef('studyListRef')

        })
    },
    // 考试成绩每页数
    sizeChangeHandleExam(val) {
      this.pageSizeExam = val
      this.pageIndexExam = 1
      this.getExamDataList()
    },
    // 考试成绩当前页
    currentChangeHandleExam(val) {
      this.pageIndexExam = val
      this.getExamDataList()
    },
    //获取考试成绩数据
    getExamDataList() {
      this.dataListExamLoading = true
      this.$http({
        url: this.$http.adornUrl(`/class/examUser/list`),
        method: 'get',
        params: this.$http.adornParams({
          'page': this.pageIndexExam,
          'limit': this.pageSizeExam,
          "manageId": this.manageItem.id
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.examList = data.page.list
          this.totalPageExam = data.page.totalCount
        } else {
          this.examList = []
          this.totalPageExam = 0
        }
        this.dataListExamLoading = false
        this.repairTableByRef('examListRef')

      })
      
    },
    // 课程评价每页数
    sizeChangeHandleComment(val) {
      this.pageSizeComment = val
      this.pageIndexComment = 1
      this.getCommentDataList()
    },
    // 课程评价每页数
    currentChangeHandleComment(val) {
      this.pageIndexComment = val
      this.getCommentDataList()
    },
    //获取课程评价数据
    getCommentDataList() {
      this.dataListCommentLoading = true;
      this.$http({
        url: this.$http.adornUrl(`/class/comment/list`),
        method: 'get',
        params: this.$http.adornParams({
          'page': this.pageIndexComment,
          'limit': this.pageSizeComment,
          "manageId": this.manageItem.id
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.commentList = data.page.list
          this.totalPageComment = data.page.totalCount
        } else {
          this.commentList = []
          this.totalPageComment = 0
        }
        this.dataListCommentLoading = false
        this.repairTableByRef('commentListRef')

      })
    },
    
    init(manageItem) {
      console.log(manageItem);
      this.manageItem = manageItem;
      this.visible = true;
      this.getStudyDataList();
      this.getExamDataList();
      this.getCommentDataList();
    },
  }
}
</script>
<style>
.right-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.container-header {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px
}

.container-content {
  flex: 1;
}


.flex-container {
  display: flex;
  justify-content: space-between;
  /* 根据需要调整 */
}

.flex-item {
  flex: 1;
  /* 可以根据需要调整比例 */
  margin: 0 10px;
  /* 添加一些间距 */
}

.left-panel,
.right-panel {
  /* 在这里添加任何特定的样式，比如背景色、边框等 */
}

.el-tabs--border-card>.el-tabs__content {
  padding: 10px 0;
}
</style>
